<template>
    <div class="find">
      <nav-bar icon="" title="发现"></nav-bar>
      <van-pull-refresh v-model="isLoding" @refresh="refresh">
        <div>
          <div class="content">
            <find-cell title="面试技巧"></find-cell>
            <technic-item
            v-for="(item,index) in technicList"
            :key="index"
            :item="item"></technic-item>
          </div>
          <div class="line"></div>
          <div class="content">
            <find-cell title="市场数据"></find-cell>
            <van-tag color="#eceaea" text-color="#545671" class="tag">{{charts.city}}</van-tag>
            <van-tag color="#eceaea" text-color="#545671" class="tag">{{charts.position}}</van-tag>
            <ul class="chart" ref="chart">
              <li class="chart-item" v-for="(item,index) in charts.yearSalary" :key="index">
                <div class="item1">{{item.year.substring(0,5)}}</div>
                <div class="item2">
                  <div
                    class="num"
                    :style="{width:(item.salary/charts.topSalary)*100+'%'}">
                    ¥{{item.salary}}
                  </div>
                </div>
                <div class="item3">
                  <div v-if="item.percent !== undefined">
                    <i class="iconfont up" v-if="item.percent >= 0">&#xe651;</i>
                    <i class="iconfont down" v-else>&#xe64e;</i>
                  </div>
                </div>
                <div class="item4">
                  <span v-if="item.percent">{{item.percent}}%</span>
                </div>
              </li>
            </ul>
            <div class="look-more">
              <span v-if="showTotal <= 3" @click="m1Click">展开更多<i class="iconfont">&#xe652;</i></span>
              <span v-else @click="m2Click">收起<i class="iconfont rotate">&#xe652;</i></span>
            </div>
          </div>
          <div class="content">
            <find-cell title="面经分享" @click.native="$router.push('/home/shareList')"></find-cell>
            <share-item v-for="(item,index) in shareList" :key="index" :item="item"></share-item>
          </div>
        </div>
      </van-pull-refresh>
    </div>
</template>

<script>
import findCell from './findCell'
import technicItem from './technicItem'
import shareItem from './shareItem'
import { articlesTechnic, chartDataHot, articlesShare } from '@/api/find'

export default {
  name: 'find',
  components: {
    findCell,
    technicItem,
    shareItem
  },
  data () {
    return {
      technicList: [],
      charts: '',
      showTotal: 3,
      shareList: [],
      isLoding: false
    }
  },
  async created () {
    this.refresh()
  },
  methods: {
    async refresh () {
      Promise.all([articlesTechnic(), chartDataHot(), articlesShare({ limit: 3 })]).then(result => {
        console.log('result', result)
        const res = result[0]
        this.technicList = res.data.data.list
        const res2 = result[1]
        res2.data.data.yearSalary.reverse()
        this.charts = res2.data.data
        this.$nextTick(() => {
          this.$refs.chart.style.height = (this.$refs.chart.scrollHeight / res2.data.data.yearSalary.length) * 3 + 'px'
        })
        const res3 = result[2]
        this.shareList = res3.data.data.list
        this.isLoding = false
      })
    },
    m1Click () {
      this.showTotal = 100
      this.$refs.chart.style.height = this.$refs.chart.scrollHeight + 'px'
    },
    m2Click () {
      this.showTotal = 3
      this.$refs.chart.style.height = (this.$refs.chart.scrollHeight / this.charts.yearSalary.length) * 3 + 'px'
    }
  }
}
</script>

<style scoped lang="less">
  .find {
    .line {
      height: 10px;
      background-color: #f7f4f5;
    }
    .content {
      padding: 20px @p15;
      .tag {
        padding: 5px 8px;
        margin-right: 10px;
        border-radius: 4px;
      }
      .chart {
        transition: all 0.5s;
        overflow: hidden;
        margin-top: 22px;
        .chart-item {
          display: flex;
          align-items: center;
          padding-bottom: 13px;
          .item1 {
            width: 60px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #545671;
            line-height: 20px;
            letter-spacing: 0px;
          }
          .item2 {
            flex: 1;
            background-color: #ebdfdf;
            border-radius: 4px;
            .num {
              background-color: #fe6d67;
              border-radius: 4px;
              font-size: 11px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: center;
              color: #ffffff;
              line-height: 20px;
              letter-spacing: 0px;
            }
          }
          .item3 {
            width: 35px;
            text-align: center;
            line-height: 20px;
            .up {
              color: #00d47a;
            }
            .down {
              color: #fe6d67;
            }
          }
          .item4 {
            width: 35px;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: right;
            color: #5b5d75;
            line-height: 20px;
            letter-spacing: 0px;
          }
        }
      }
      .look-more {
        text-align: center;
        span {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #545671;
          line-height: 20px;
          letter-spacing: 0px;
          i {
            color: #b4b4bd;
            font-size: 12px;
          }
          .rotate {
            display: inline-block;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
</style>
